<template>
  <div class='comment-records-sub-wrapper'>
    <div class='sub-left-wrapper'>
      <div class='iconfont sub-left-hide-icon' v-show='isShowDetail' @click='toggleShowDetail(false)'>&#xe6ac;</div>
      <div class='iconfont sub-left-show-icon' v-show='!isShowDetail' @click='toggleShowDetail(true)'>&#xe612;</div>
      <div class='sub-left-line' v-show='isShowDetail'></div>
    </div>
    <div class='sub-right-wrapper'>
      <div class='sub-right-hide' v-show='!isShowDetail' @click='toggleShowDetail(true)'>展开隐藏的评论</div>
      <div class='sub-right-content' v-show='isShowDetail'>
        <div class='content-title'>
          <span class='content-title-avatar'>
            <img :src="record.avatar" v-show='record.avatar'>
          </span>
          <span class='content-title-detail'>
            <span class='content-title-nickname'>{{record.nickname}}</span>
            <span class='content-title-time'>{{formatCommentTime(record.createTime)}}</span>
          </span>
        </div>
        <div class='content-text'>{{record.content}}</div>
        <div class='content-reply' v-show='!startReply'>
          <span @click='startReply = true'>回复</span>
        </div>
        <div class='content-reply-input' v-if='startReply'>
          <comment-input @cancel='startReply = false' @send='sendReply'></comment-input>
        </div>
        <ul class='content-sub-list'>
          <li class='content-sub-item' v-for='(subRecord, index) of record.children' :key='"subRecord" + index'>
            <comment-records-sub :record='subRecord'></comment-records-sub>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import commentInput from '@/components/comment-input'
export default {
  name: 'commentRecordsSub',
  components: {
    commentInput
  },
  data () {
    return {
      isShowDetail: true,
      startReply: false
    }
  },
  props: {
    record: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    toggleShowDetail (isShow) {
      this.isShowDetail = isShow
    },
    sendReply (text) {
      // alert(text)
      this.startReply = false
    }
  },
  mounted () {
  }
}
</script>

<style scoped lang='stylus'>
.comment-records-sub-wrapper
  padding-top 10px
  display flex
  .sub-left-wrapper
    flex none
    display flex
    flex-direction column
    align-items center
    padding-top 5px
    .sub-left-hide-icon
      flex none
      width 14px
      height 14px
      line-height 14px
      text-align center
      font-size 14px
    .sub-left-show-icon
      flex none
      width 14px
      height 14px
      line-height 14px
      text-align center
      font-size 14px
      color #03576c
    .sub-left-line
      flex 1
      width 1px
      background #ccc
  .sub-right-wrapper
    flex 1
    width 0
    padding-left 10px
    padding-bottom 10px
    .sub-right-hide
      font-size 14px
      line-height 24px
      color #03576c
    .sub-right-content
      .content-title
        display flex
        align-items center
        margin-bottom 7px
        .content-title-avatar
          flex none
          display inline-block
          width 26px
          height 26px
          border-radius 50%
          background #ddd
          overflow hidden
          margin-right 10px
          img
            width 100%
            height 100%
            border-radius 50%
        .content-title-detail
          flex 1
          width 0
          display flex
          align-items flex-end
          .content-title-nickname
            font-size 14px
            margin-right 10px
            color #000
            noWrap()
          .content-title-time
            flex none
            font-size 10px
            color #aaa
      .content-text
        color #555
        font-size 12px
        line-height 1.5
        margin-bottom 7px
      .content-reply
        font-size 11px
        color #aaa
      .content-reply-input
        padding-right 30px
</style>
